<template>
    <div class="box-view">
              <div class="item" v-for="(item,index) in columnList" :key="index">
                  <div class="name">{{item.label}}：</div>
                  <div class="value">{{item.value}}</div>
              </div>
              <div class="item">
                  <div class="name">备注：</div>
                  <div class="value" style="border:1px solid #ddd"> {{data.remark}}</div>
              </div>
                <div class="item">
                  <div class="name">客户评价：</div>
                  <div class="value"> 
                          <el-row>
                                <el-col :span="12" style="width: 140px;">
                                      <div class="pname">签名</div>
                                    <img :src="data.signatureImg" style="width:100px;height:60px;margin-left:10px" />            
                                </el-col>
                                <el-col :span="12" style="width: 140px;">
                                       <div class="pname">评分</div>
                                        <el-radio-group v-model="score" style="width:100px">
                                          <el-radio disabled :label="5">非常满意</el-radio>
                                          <el-radio disabled :label="4">满意</el-radio>
                                          <el-radio disabled :label="3">一般</el-radio>
                                          <el-radio disabled :label="2">还行</el-radio>
                                          <el-radio disabled :label="1">不满意</el-radio>
                                        </el-radio-group>
                                </el-col>
                              </el-row> 
                  </div>
              </div>
               <div class="item">
                  <div class="name">现场照片：</div>
                  <div class="value"> 
                    <div class="img-view" v-for="(item,index) in cusSecurityCheckTaskImgList" :key="index">
                        <div class="name">{{item.imgName}}</div>
                        <div class="img">
                            <el-image 
                              style="width: 70px; height: 70px"
                              :src="item.imgUrl" 
                              :preview-src-list="[item.imgUrl]">
                            </el-image>
                        </div>
                    </div>
                  </div>
              </div>
            
    </div>
</template>
<script>

import  {findCusSecurityCheckTask}  from '@/api/user'
  export default {
    props:{
     data:{
       type:Object,
       default(){
         return null
       }
     }
    },
    data() {
      return {
        score:5,
        columnList:[
          {label:'所属计划',prop:'securityCheckName',iStrue:false},
          {label:'任务编号',prop:'taskNo',iStrue:true},
          {label:'安检员',prop:'staffId',iStrue:true},
          {label:'安检员工号',prop:'staffId',iStrue:true},
          {label:'客户类型',prop:'customerCateId',iStrue:true},
          {label:'安检地址',prop:'address',iStrue:true},
          {label:'客户名称',prop:'customerName',iStrue:true},
          {label:'联系电话',prop:'customerPhone',iStrue:true},
          {label:'客户户号',prop:'doorNo',iStrue:true},
          {label:'开户时间',prop:'name',iStrue:true},
          {label:'上期安检时间',prop:'lastCheckTime',iStrue:true},
          {label:'安检周期',prop:'name',iStrue:true},
          {label:'计划完成时间',prop:'expectCheckTime',iStrue:true},
          {label:'实际安检实际',prop:'checkedTime',iStrue:true},
          {label:'入户情况',prop:'enterRoomSituation',iStrue:true},
          {label:'安检结果',prop:'securityCheckResult',iStrue:true},
          {label:'表具余额(元)',prop:'balance',iStrue:true},
          {label:'燃气表号',prop:'meterNo',iStrue:true},
          {label:'读数(m³)',prop:'gasMeterReading',iStrue:true},
        ], 
        cusSecurityCheckTaskImgList:[] 
      };
    },
    mounted(){
      this.columnList.map((item)=>{
        if(this.data[item.prop]){
          this.$set(item,'value',this.data[item.prop])
        }
        return item
      })
      this.score= this.data.score
      this.getData()
    },
    methods: {
       getData(){
         findCusSecurityCheckTask({id:this.data.id}).then((res)=>{
               if(res.code==0){
                console.log(res,'========')
                this.cusSecurityCheckTaskImgList= res.data.cusSecurityCheckTaskImgList
              }
          })
         
       }
    }
  }
</script>
<style lang="scss" scoped>

.box-view{
      display: flex;
      justify-content:flex-start;
      flex-wrap: wrap;
      align-items: flex-start;
    .item{
      width:500px;
      display: flex;
      justify-content:flex-start;
       align-items: flex-start;
       padding-top:20px;
       .name{
         font-size:15px;
       }
       .value{
         font-size:16px;
         color:#333;
         width:360px;
         min-height:20px;
         .img-view{
              display: flex;
              justify-content: flex-start;
              align-items: center;
              border:1px solid #ddd;
              border-bottom:none;
              width:200px;
              .name{
                width:100px;
                text-align: center;
                height:80px;
                border-right:1px solid #ddd;
                display: flex;
                align-items: center;
                align-self: center;
                padding-left:5px;
              }
              .img{
                text-align: center;
                 width:100px;
              }
            }
            .img-view:last-child{
              border-bottom:1px solid #ddd;
            }
       }
    }
    .pname{
      font-size: 14px;
      color: #606266;
      padding-right:20px;
      font-weight: bold;
      padding-bottom:10px;
    }
}


</style>